/*
 * @Description:多选框配置页
 * @Author: LCL
 * @Date: 2021-11-15
 * @LastEditors: LCL
 * @LastEditTime: 2021-11-16
 * @FilePath: /beff/src/components/ComponentConfig/Checkbox.tsx
 */
import { Form, Input, Button, Space, Checkbox, Select } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import {useEffect}from 'react';

import {
  titleRender,isInline,
  fieldRender,checkRender,
  descRender,tipRender,
  fieldPermissionsRender,
  spanWidthRender
} from '@/components/ComponentConfig/commonItem';

type PropsType ={
  config:any,
  onChangeCallback:Function
}

const CheckboxConfig = (props: PropsType) => {
  const { config } = props;
  const [form] = Form.useForm();

  useEffect(()=>{
    form.setFieldsValue({...config});
  },[config])

  const onValuesChange = (changeValue: any, allValue: any) => {
    // console.log(changeValue,allValue);

    for(let k in changeValue) {
      config.props[k] = allValue[k]
      if(k==='options'){
        const values = allValue[k].filter((v:any)=>v.check).map((v:any)=>v.value);
        config.value = values;
      }
    }
    props.onChangeCallback(config);

    const direction = allValue.direction || 'vertical';
    const { required, disabled, label, name, options, layout } = allValue;
    const commonForm = { required, disabled, label, name, layout };
    // const values: (string | undefined)[] = [];
    // const options = allValue.options.map(
    //   (item: { check?: boolean; label?: string; value?: string }) => {
    //     const { label, value } = item;
    //     if (item.check) {
    //       values.push(value);
    //     }
    //     return { label, value };
    //   },
    // );
    // setComponentsConfig({ checkbox: { options, direction }, commonForm });
  };

  return (
    <div>
      { titleRender(config,props,'title')}
      { fieldRender(config,props,'field')}
      { descRender(config,props,'describe')}
    <Form
      form={form}
      layout="vertical"
      onValuesChange={onValuesChange}
      initialValues={config.props}
    >
      <span>选项</span>
      <Form.List
        name="options"
        initialValue={config.options}
      >
        {(fields, { add, remove }) => {
          return (
            <>
              {fields.map(({ key, name, fieldKey, ...restField }) => {
                return (
                  <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                    <Form.Item
                      {...restField}
                      name={[name, 'check']}
                      fieldKey={[fieldKey, 'check']}
                      valuePropName="checked"
                    >
                      <Checkbox style={{ margin: 0 }} />
                    </Form.Item>
                    <Form.Item
                      {...restField}
                      name={[name, 'label']}
                      fieldKey={[fieldKey, 'label']}
                      rules={[{ required: true, message: '请输入名称' }]}
                    >
                      <Input placeholder="名称" />
                    </Form.Item>
                    <Form.Item
                      {...restField}
                      name={[name, 'value']}
                      fieldKey={[fieldKey, 'value']}
                      rules={[{ required: true, message: '请输入值' }]}
                    >
                      <Input placeholder="值" />
                    </Form.Item>
                    <MinusCircleOutlined onClick={() => remove(name)} />
                  </Space>
                );
              })}
              <Form.Item>
                <Button
                  type="dashed"
                  onClick={() => {
                    console.log(fields);
                    add({
                      label: `选项${fields.length + 1}`,
                      value: `值${fields.length + 1}`,
                      check: false,
                    });
                  }}
                  block
                  icon={<PlusOutlined />}
                >
                  添加选项
                </Button>
              </Form.Item>
            </>
          );
        }}
      </Form.List>
      <Form.Item label="排列方式" name="direction">
        <Select>
          <Select.Option value="vertical">纵向排列</Select.Option>
          <Select.Option value="horizontal">横向排列</Select.Option>
        </Select>
      </Form.Item>
    </Form>
      { fieldPermissionsRender(config,props,'fieldPermissions')}
      { checkRender(config,props,'check')}
      { isInline(config,props,'inline')}
      { spanWidthRender(config,props,'span')}
    </div>
  );
};

export default CheckboxConfig;
